<template>
	<view class="container">
		<u-sticky bgColor="#fff">
			<view class="switch-tabbar">
				<u-tabs :list="cateList" @click="switchTab" :scrollable="false" lineColor="#26B3A0" lineWidth="40">
				</u-tabs>
			</view>
		</u-sticky>

		<view class="form">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
				<block v-for="(item,key) in dataList" :key="key">
					<view class="panel" @click="getAnswer(item)">
						<view class="head">
							<view class="title">{{item.title}}</view>
						</view>
						<view class="content">
							<!-- 图转文格式 -->
							<u-album v-if="item.type == 0 && item.img_full_path" :urls="[item.img_full_path]"></u-album>
							<!-- 其他格式 -->
							<u-parse v-else :content="item.auth_content"></u-parse>
						</view>
						<view class="bottom">
							回答时间：{{item.created_at.substr(0,16)}}
						</view>
					</view>
				</block>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				upOption: {
					empty: {
						icon: this.$configData.assetsUrl + 'empty.png',
						tip: '-- 没有相关数据 --'
					},
					textNoMore: '-- 我也是有底线的\(^o^)/~ --'
				},
				dataList: [],
				cateList: [{
					id: 0,
					name: '图文识别'
				}, {
					id: 1,
					name: '文案审核'
				}],
				category: 0
			};
		},
		methods: {
			getAnswer(item) {
				uni.navigateTo({
					url: '/pages/detail/index?avg=' + item.encode_id
				})
			},
			switchTab(e) {
				this.category = e.id;
				let page = {
					num: 1,
					size: 10
				}
				this.upCallback(page);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			async upCallback(page) {
				var _data = {
					limit: 10,
					page: page.num,
					type: this.category,
					loginType: 1
				};
				var _res = await this.$http.requestApi('GET', 'ocr/user/getUserOcrList', _data);
				if (_res.status == 200) {
					if (page.num == 1) {
						//如果是第一页需手动制空列表
						this.dataList = [];
					}
					this.dataList = this.dataList.concat(_res.data.source.data);
					// 数据渲染完毕再隐藏加载状态
					this.$nextTick(() => {
						this.mescroll.endBySize(_res.data.source.data.length, _res.data.source.total);
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: _res.msg
					});
					this.mescroll.endErr();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		margin: 0 auto;
		z-index: 15;

		.header {
			margin-bottom: 30rpx;

			.title {
				text-align: center;
				color: #fff;
				margin: 30rpx 0rpx;
			}
		}

		.panel {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 15rpx;
			box-shadow: 0rpx 10rpx 10rpx #eee;
			margin-bottom: 15rpx;

			.bottom {
				font-size: 24rpx;
			}

			.head {
				padding-bottom: 30rpx;

				.title {
					font-weight: bolder;
					font-size: 30rpx;
				}
			}

			.content {
				margin: 30rpx 0rpx;
			}

			.bottom {
				background-color: #F0FAF8;
				color: #26B3A0;
				padding: 15rpx;
				border-radius: 10rpx;
			}
		}
	}

	.bg {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		background-color: #26B3A0;
		min-height: 200rpx;
		border-radius: 0rpx 0rpx 140rpx 140rpx;
		z-index: -1;
	}
</style>